<script setup>
import Menu from "@/components/Menu.vue";
import Head from "@/components/Head.vue";
import {queryAllDishes} from "@/web-api/DishAndRes_User/dishes-user.js"
import router from "@/router/index.js";
import {useRouter} from "vue-router";
import {baseStaticRecourseAPI, NOW_ENVIRONMENT} from "../../baseAPIConfig.js";

let components= {Menu, Head}
const route = useRouter();

const handlePageChange = (pageNum, pageSize)=>{
  queryParams.pageNum = pageNum;
  queryParams.pageSize = pageSize;
  handleQuery();
}
let queryParams = reactive({
  // 同步分页器
  pageNum: 1,
  pageSize: 8,
  restId: router.currentRoute.value.params.restaurantId
})
// 当前页数据
let tableProp = ref([]);
// 当前页数据总数
let total = ref(0);
// 表格加载遮罩层
let tableLoading = ref(false);
const handleQuery = ()=>{
  getList(queryParams);
}
const getList = (queryParams) => {
  console.log("queryParams",queryParams);

  // 设置表格加载状态为 true
  tableLoading.value = true;
  let id = router.currentRoute.value.params.restaurantId;
  console.log(id)
  let params = {restId:id ,pageNum: queryParams.pageNum, pageSize: 8, }
  // 构建请求参数对象
  console.log(params)
  // 调用 queryAllSatisfiedDishes 函数进行数据查询
  queryAllDishes(params).then(res => {
    tableProp.value = res.rows
    console.log('res',res);
    // 更新总条目数
    total.value = res.total;
    console.log(total.value)
    // 设置表格加载状态为 false，表示加载完成
    tableLoading.value = false;
    console.log("data",tableProp.value)
  });
};

const ToDetails=(dishId)=> {
  // 使用 router.push 进行路由导航，跳转到菜品详情页面
  console.log("点击了一下");
  router.push(`/dishes/index/${dishId}`);
};

let currentUrl = ref();
onMounted(() => {
  currentUrl.value = route.path;
  getList(queryParams);
})
</script>

<template>
  <div class="head">
    <Head></Head>
  </div>
  <div class="menu">
    <Menu></Menu>
  </div>
  <div>
    <div class="food" >
      <el-row class="food" >
        <!--根据传入的数字进行更改-->

        <el-col
            v-for="dish in tableProp"
            :key="dish.dishId"
            :span="6"
            class = custom-col
        >
          <el-card :body-style="{ padding: '10px' }" @click="ToDetails(dish.dishId)" style="margin-right: 20px;">
            <img :src="baseStaticRecourseAPI[NOW_ENVIRONMENT]+dish.picture" alt="暂无图片" class="image"/>
            <div style="padding: 14px">
              <span>{{ dish.dishName }}</span> <span>   售价：{{ dish.salesPrice }}</span>
              <br>
              <span>菜系：{{ dish.cuisine }}</span>
            </div>
          </el-card>
        </el-col>

      </el-row>
      <el-pagination class = pagination
                     layout="prev, pager, next" :total="50"
                     @change="handlePageChange">
      </el-pagination>
    </div>
  </div>
  <router-view />
</template>

<style scoped>
.custom-col {
  margin-bottom: 10px; /* 设置左右边距，根据需要调整值 */

}

.food {
  margin-left: 20px;   /* 设置左边距 */
  margin-right: 20px;  /* 设置右边距 */
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}
.page .image{
  width: 200px; /* 设置宽度 */
  height: 150px; /* 设置高度 */
  margin-left: 20px;
  margin-top: 10px;
  object-fit: contain;
}
</style>